let organization = [
    {
        encode: "GS0001",
        name: "星星金融科技集团",
        categories: "总部",
        superior: "无",
        leader: "张司",
        num: 8001,
        staffing: 10000,
        time: "2022-01-02",
        state: "• 启用",
        details: "查看详情",
    },
    {
        encode: "BM0001",
        name: "金融产品部",
        categories: "部门",
        superior: "深圳分公司",
        leader: "刘思思",
        num: 55,
        staffing: 60,
        time: "2022-01-02",
        state: "• 停用",
        details: "查看详情",
    },
    {
        encode: "BM0002",
        name: "金融产品部",
        categories: "部门",
        superior: "深圳分公司",
        leader: "刘思思",
        num: 55,
        staffing: 60,
        time: "2022-01-02",
        state: "• 启用",
        details: "查看详情",
    },
    {
        encode: "BM0003",
        name: "金融产品部",
        categories: "部门",
        superior: "深圳分公司",
        leader: "刘思思",
        num: 55,
        staffing: 60,
        time: "2022-01-02",
        state: "• 停用",
        details: "查看详情",
    },
    {
        encode: "BM0004",
        name: "金融产品部",
        categories: "部门",
        superior: "深圳分公司",
        leader: "刘思思",
        num: 55,
        staffing: 60,
        time: "2022-01-02",
        state: "• 启用",
        details: "查看详情",
    },
    {
        encode: "BM0005",
        name: "研发部",
        categories: "部门",
        superior: "深圳分公司",
        leader: "刘思思",
        num: 20,
        staffing: 30,
        time: "2022-01-02",
        state: "• 启用",
        details: "查看详情",
    },
    {
        encode: "BM0006",
        name: "人力资源部",
        categories: "部门",
        superior: "深圳分公司",
        leader: "刘思思",
        num: 20,
        staffing: 30,
        time: "2022-01-02",
        state: "• 启用",
        details: "查看详情",
    },
    {
        encode: "BM0007",
        name: "财务部",
        categories: "部门",
        superior: "深圳分公司",
        leader: "刘思思",
        num: 30,
        staffing: 30,
        time: "2022-01-02",
        state: "• 启用",
        details: "查看详情",
    },
    {
        encode: "BM0008",
        name: "金融产品部",
        categories: "部门",
        superior: "深圳分公司",
        leader: "刘思思",
        num: 55,
        staffing: 60,
        time: "2022-01-02",
        state: "• 启用",
        details: "查看详情",
    },
    {
        encode: "BM0009",
        name: "研发部",
        categories: "部门",
        superior: "深圳分公司",
        leader: "刘思思",
        num: 55,
        staffing: 60,
        time: "2022-01-02",
        state: "• 启用",
        details: "查看详情",
    },
    {
        encode: "BM0010",
        name: "金融产品部",
        categories: "部门",
        superior: "深圳分公司",
        leader: "刘思思",
        num: 55,
        staffing: 60,
        time: "2022-01-02",
        state: "• 启用",
        details: "查看详情",
    },
    {
        encode: "BM0011",
        name: "金融产品部",
        categories: "部门",
        superior: "深圳分公司",
        leader: "刘思思",
        num: 55,
        staffing: 60,
        time: "2022-01-02",
        state: "• 启用",
        details: "查看详情",
    },
    {
        encode: "BM0012",
        name: "金融产品部",
        categories: "部门",
        superior: "深圳分公司",
        leader: "刘思思",
        num: 55,
        staffing: 60,
        time: "2022-01-02",
        state: "• 启用",
        details: "查看详情",
    },
    {
        encode: "BM0013",
        name: "金融产品部",
        categories: "部门",
        superior: "深圳分公司",
        leader: "刘思思",
        num: 55,
        staffing: 60,
        time: "2022-01-02",
        state: "• 启用",
        details: "查看详情",
    },
    {
        encode: "BM0014",
        name: "金融产品部",
        categories: "部门",
        superior: "深圳分公司",
        leader: "刘思思",
        num: 55,
        staffing: 60,
        time: "2022-01-02",
        state: "• 启用",
        details: "查看详情",
    },
    {
        encode: "BM0015",
        name: "金融产品部",
        categories: "部门",
        superior: "深圳分公司",
        leader: "刘思思",
        num: 55,
        staffing: 60,
        time: "2022-01-02",
        state: "• 启用",
        details: "查看详情",
    },
    {
        encode: "BM0016",
        name: "金融产品部",
        categories: "部门",
        superior: "深圳分公司",
        leader: "刘思思",
        num: 55,
        staffing: 60,
        time: "2022-01-02",
        state: "• 启用",
        details: "查看详情",
    },
    {
        encode: "BM0017",
        name: "金融产品部",
        categories: "部门",
        superior: "深圳分公司",
        leader: "刘思思",
        num: 55,
        staffing: 60,
        time: "2022-01-02",
        state: "• 启用",
        details: "查看详情",
    },
    {
        encode: "BM0018",
        name: "金融产品部",
        categories: "部门",
        superior: "深圳分公司",
        leader: "刘思思",
        num: 55,
        staffing: 60,
        time: "2022-01-02",
        state: "• 启用",
        details: "查看详情",
    },
    {
        encode: "BM0019",
        name: "金融产品部",
        categories: "部门",
        superior: "深圳分公司",
        leader: "刘思思",
        num: 55,
        staffing: 60,
        time: "2022-01-02",
        state: "• 启用",
        details: "查看详情",
    },
];
let nullArr = [];
const pageSize = 10;
let index = null;
function renderTbody(data, currentPage = 1) {
    index = currentPage;
    organizationPaging(data, currentPage);
    let statIndex = pageSize * (currentPage - 1);
    let endIndex = statIndex + pageSize;
    let newOrganizationArr = data.slice(statIndex, endIndex);
    $(".table>tbody").empty();
    for (let i = 0; i < newOrganizationArr.length; i++) {
        const item = newOrganizationArr[i];
        $(".table>tbody").append(
            `
            <tr>
                <td>${item.encode}</td>
                <td>${item.name}</td>
                <td>${item.categories}</td>
                <td>${item.superior}</td>
                <td>${item.leader}</td>
                <td>${item.num}</td>
                <td>${item.staffing}</td>
                <td>${item.time}</td>
                <td id="stateBy">${item.state}</td>
                <td><a data-id="${item.encode}"class="detailA">${item.details}</a></td>
            </tr>
            `
        );
    }
    for (let i = 0; i < organization.length; i++) {
        if ($(".table>tbody #stateBy").eq(i).text() === "• 启用") {
            $(".table>tbody #stateBy").eq(i).css("color", "#33CC00");
        } else {
            $(".table>tbody #stateBy").eq(i).css("color", "#cccccc");
        }
    }
}
renderTbody(organization);
function organizationPaging(data, currentPage) {
    let num = Math.ceil(data.length / pageSize);
    $(".pagination").empty().append(`<li id="last"><a>&laquo;</a></li>`);
    for (let i = 1; i <= num; i++) {
        $(".pagination").append(`<li id="pages"><a>${i}</a></li>`);
    }
    $(".pagination").append(`<li id="next"><a>&raquo;</a></li>`);
    $(".pagination>#pages")
        .eq(currentPage - 1)
        .addClass("active");
    $(".pagination>#last").on("click", function () {
        let currentPage = parseInt($(".pagination>.active>a").text());
        if (currentPage === 1) {
            return;
        }
        if (nullArr.length === 0) {
            renderTbody(organization, currentPage - 1);
        } else {
            renderTbody(nullArr, currentPage - 1);
        }
        // renderTbody(organization, currentPage - 1);
    });

    $(".pagination>#next").on("click", function () {
        let currentPage = parseInt($(".pagination>.active>a").text());
        let num = Math.ceil(organization.length / pageSize);
        if (currentPage === num) {
            return;
        }
        if (nullArr.length === 0) {
            renderTbody(organization, currentPage + 1);
        } else {
            renderTbody(nullArr, currentPage + 1);
        }
        // renderTbody(organization, currentPage + 1);
    });
}
$(".pagination").on("click", "#pages", function (event) {
    let currentPage = parseInt($(event.target).text());
    if (nullArr.length === 0) {
        renderTbody(organization, currentPage);
    } else {
        renderTbody(nullArr, currentPage);
    }
    // renderTbody(organization, currentPage);
});
function clearInputVal() {
    $("#inputName1").val("");
    $("#inputCategories1").val("总部");
    $("#inputEncode1").val("");
    $("#inputLeader1").val("");
    $("#inputSuperior1").val("A");
    $("#inputNum1").val("");
    $("#inputStaffing1").val("");
}
$(".btn-area>#addArr").on("click", function () {
    $("#addArrModal .modal-header>.md-title").text("新增组织");
    $("#inputEncode1").removeAttr("disabled");
    $("#modifyBtn").hide();
    $("#submitBtn").show();
    clearInputVal();
    $("#addArrModal").modal("show");
});
$("#submitBtn").on("click", function () {
    let newData = {};
    let nameVal = $("#inputName1").val().trim();
    let categories = $("#inputCategories1").val().trim();
    let encode = $("#inputEncode1").val().trim();
    let leader = $("#inputLeader1").val().trim();
    let superior = $("#inputSuperior1").val().trim();
    let num = $("#inputNum1").val().trim();
    let staffing = $("#inputStaffing1").val().trim();
    let stateVal = $(".radio>label>input");
    let now = new Date();
    let time =
        now.getFullYear() +
        "-" +
        (now.getMonth() + 1 < 10 ? "0" : "") +
        (now.getMonth() + 1) +
        "-" +
        (now.getDate() < 10 ? "0" : "") +
        now.getDate();
    newData["encode"] = encode;
    newData["name"] = nameVal;
    newData["categories"] = categories;
    newData["superior"] = superior;
    newData["leader"] = leader;
    newData["staffing"] = staffing;
    newData["num"] = num;
    newData["time"] = time;
    // newData["num"]=num;
    // newData["num"]=num;
    if ($(stateVal).eq(0).prop("checked")) {
        newData["state"] = "• 启用";
    } else if ($(stateVal).eq(1).prop("checked")) {
        newData["state"] = "• 停用";
    }
    newData["details"] = "查看详情";
    console.log(newData);
    for (const key in newData) {
        if (newData[key] === "") {
            alert("请重新检查项目是否为空！！");
            newData = {};
            return;
        }
    }
    organization.push(newData);
    renderTbody(organization);
    clearInputVal();
    $("#addArrModal").modal("hide");
});
$("#modifyBtn").on("click", function () {
    let nameVal = $("#inputName1").val().trim();
    let categories = $("#inputCategories1").val().trim();
    let encode = $("#inputEncode1").val();
    let leader = $("#inputLeader1").val().trim();
    let superior = $("#inputSuperior1").val().trim();
    let num = $("#inputNum1").val().trim();
    let staffing = $("#inputStaffing1").val().trim();
    let stateVal = $(".radio>label>input");
    for (let i = 0; i < organization.length; i++) {
        let item = organization[i];
        if (item.encode === encode) {
            item.encode = encode;
            item.name = nameVal;
            item.categories = categories;
            item.leader = leader;
            item.superior = superior;
            item.num = num;
            item.staffing = staffing;
            if ($(stateVal).eq(0).prop("checked")) {
                item.state = "• 启用";
            } else if ($(stateVal).eq(1).prop("checked")) {
                item.state = "• 停用";
            }
        }
    }
    renderTbody(organization);
    clearInputVal();
    $("#addArrModal").modal("hide");
});
$(".table tbody").on("click", ".detailA", function (event) {
    $("#detailModal .modal-body .title-ct").css({
        fontSize: "16px",
        fontWeight: "650",
        color: "#000000",
    });
    $("#detailModal .modal-body .title-td").css({
        fontSize: "16px",
        fontWeight: "500",
        color: "#999999",
    });
    let dataId = $(event.target).attr("data-id");
    let organizationArr = organization.find((item) => {
        return item.encode === dataId;
    });
    $("#name").text(organizationArr.name);
    if (organizationArr.state === "• 启用") {
        $("#state")
            .text(organizationArr.state)
            .css("backgroundColor", "#33cc00");
    } else {
        $("#state").text(organizationArr.state).css("backgroundColor", "grey");
    }
    $("#detailModal .modal-body #name").text(organizationArr.name);
    $("#detailModal .modal-body #superior").text(organizationArr.superior);
    // $("#detailModal .modal-body #city").text(organizationArr.city);
    $("#detailModal .modal-body #num").text(organizationArr.num);
    $("#detailModal .modal-body #leader").text(organizationArr.leader);
    $("#detailModal .modal-body #encode").text(organizationArr.encode);
    $("#detailModal .modal-body #categories").text(organizationArr.categories);
    // $("#detailModal .modal-body #place").text(organizationArr.place);
    $("#detailModal .modal-body #staffing").text(organizationArr.staffing);
    // $("#detailModal .modal-body #description").text(organizationArr.description);

    $("#detailModal").modal("show");
    $("#modify").on("click", function () {
        $("#detailModal").modal("hide");
        $("#addArrModal .modal-header>.md-title").text("修改组织");
        $("#inputEncode1").attr("disabled", true);
        $("#submitBtn").hide();
        $("#modifyBtn").show();
        $("#addArrModal").modal("show");
        $("#inputName1").val(organizationArr.name);
        $("#inputCategories1").val(organizationArr.categories);
        $("#inputEncode1").val(organizationArr.encode);
        $("#inputLeader1").val(organizationArr.leader);
        $("#inputSuperior1").val(organizationArr.superior);
        $("#inputNum1").val(organizationArr.num);
        $("#inputStaffing1").val(organizationArr.staffing);
    });
});
// data：原始数据，类型为数组；params：过滤条件，类型为对象；
// const productFilter = (data, params) =>
//     data.filter((item) =>
//         Object.keys(params).every(
//             (key) => item[key] && item[key].includes(params[key])
//         )
//     );
$("#searchEncode").on("blur", () => {
    let siftCt = $("#encodeSiftCt").text();
    console.log(siftCt);
    let label = $(".inBox>label").eq(0).text();
    let val = $("#searchEncode").val().trim();
    if (siftCt === val || val === "") {
        return;
    } else {
        $("#encodeSift").remove();
        $(".sift-group").append(`
        <span class="sift-tip" id="encodeSift">
        ${label}<span id ="encodeSiftCt">${val}</span>
        <span class="glyphicon glyphicon-remove-circle"
        aria-hidden="true"></span>
        </span>`);
        $(".sift-tip").on(
            "click",
            ".glyphicon-remove-circle",
            function (event) {
                $(event.target).parent().remove();
                $("#searchEncode").val("");
            }
        );
    }
});
$("#searchName").on("blur", () => {
    let siftCt = $("#nameSiftCt").text();
    let label = $(".inBox>label").eq(1).text();
    let val = $("#searchName").val().trim();
    if (siftCt === val || val === "") {
        return;
    } else {
        $("#nameSift").remove();
        $(".sift-group").append(`
        <span class="sift-tip" id="nameSift">
        ${label}<span id ="nameSiftCt">${val}</span>
        <span class="glyphicon glyphicon-remove-circle"
        aria-hidden="true"></span>
        </span>`);
        $(".sift-tip").on(
            "click",
            ".glyphicon-remove-circle",
            function (event) {
                $(event.target).parent().remove();
                $("#searchName").val("");
            }
        );
    }
});
$("#searchState").on("blur", () => {
    let siftCt = $("#stateSiftCt").text();
    let label = $(".inBox>label").eq(2).text();
    let val = $("#searchState").val();
    if (siftCt === val || val === "") {
        return;
    } else {
        $("#stateSift").remove();
        $(".sift-group").append(`
        <span class="sift-tip" id="stateSift">
        ${label}<span id ="stateSiftCt">${val}</span>
        <span class="glyphicon glyphicon-remove-circle"
        aria-hidden="true"></span>
        </span>`);
        $(".sift-tip").on(
            "click",
            ".glyphicon-remove-circle",
            function (event) {
                $(event.target).parent().remove();
                $("#searchState").val("");
            }
        );
    }
});

$("#searchBtn").on("click", () => {
    let conditionObj = {};
    const productFilter = (data, params) =>
        data.filter((item) =>
            Object.keys(params).every(
                (key) => item[key] && item[key].includes(params[key])
            )
        );
    const encodeVal = $("#searchEncode").val().trim();
    const nameVal = $("#searchName").val().trim();
    const stateVal = $("#searchState").val();
    conditionObj["encode"] = encodeVal;
    conditionObj["name"] = nameVal;
    conditionObj["state"] = stateVal;
    let condition = productFilter(organization, conditionObj);
    nullArr = condition;
    renderTbody(condition);
});
$("#resetBtn").on("click", () => {
    $(".sift-group").empty();
    $("#searchEncode").val("");
    $("#searchName").val("");
    $("#searchState").val("• 启用");
    nullArr = [];
    renderTbody(organization);
});
$(".branch1").on("click", () => {
    $("#xlk").toggleClass("rotate");
});
$(".branch2").on("click", () => {
    $("#xlk2").toggleClass("rotate");
});
